<template>
  <div class="box">
    <div class="cardBox card">
      <header>
        {{boxData.title}}
        <span class="icon"><a target="_blank" :href="boxData.docPath">编辑</a> </span>
      </header>
      <aside>{{introduction}}</aside>
      <main class="content">
        <div class="box1">
          <div class="unit" v-for="itemC in boxData.children"  @mouseenter="onMouseEnter(itemC)">
            <a class="a" target="_blank" :href="itemC.link">
              {{ itemC.title }}
            </a> 
          </div>
        </div>
      </main>
    </div>
  </div>
</template>
<script setup lang='ts'>
import {toRefs, withDefaults, defineProps, ref, computed} from 'vue'
interface propMsg {
  boxData: {
    [p: string]: any
  }
  index: number
}
// const emit = defineEmits([])
const props = withDefaults(defineProps<propMsg>(), {
  boxData: () => ({}),
  index: 0
})
const {boxData, index} = toRefs(props)
const introduction = ref(boxData.value.introduction)
function onMouseEnter(itemC: any) {
  console.log('鼠标滑入了元素');
  introduction.value = itemC.introduction
}
</script>
<style scoped lang='scss'>
.box {
  position: relative;
  box-sizing: border-box;
  @media screen and (max-width: 600px) {
    width: calc(100vw);
  }
  @media screen and (min-width: 600px) and (max-width: 1000px) {
    width: calc(50vw);
  }
  @media screen and (min-width: 1000px) and (max-width: 1441px) {
    width: calc(33.33333vw);
  }
  @media screen and (min-width: 1441px) {
    width: calc(25vw);
  }
  height: 220px;
  text-align: center;
  margin: 20 0.5rem;
  padding: 0.5rem;
  transition: all .5s,transform .5s;
  aside {
    width: calc(100% - 40px);
    height: 16px;
    padding: 0 20px;
    text-decoration: underline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.6rem; 
  }
}

.content {
  height: 78%;
  overflow: auto;
}
.box1 {
  padding: 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  .unit {
    // position: relative;
    box-sizing: border-box;
    // margin: 0 0.5rem;
    padding: 0 0.5rem;
    width: 33.3333%;
    height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .a {
      text-align: $box-link-align;
      font-size: 0.9rem;
      vertical-align: text-bottom;
      color: $box-link-color;
      text-decoration: none;
      transition: all .2s;
    }
  }
}
.card {
  position: relative;
  color: $site-color;
  border-radius: 1.5rem;
  background-color: $box-background-color;
  width: 100%;
  height: 100%;
}
.icon {
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
  font-size: 0.8rem;
  a {
    color: white;
  }
}
// @for $i from 0 to 9 {
  // .card:hover {
  //   width: 120%;
  //   height: 120%;
  //   background-color: rgba(0,0,0, 0.8);
  //   transform: perspective(500px) rotateX(25deg) translate3d(-10px, -30px, 50px);
  //   box-shadow: 0 35px 35px -8px rgba(0,0,0,0.9);
  //   z-index: 10;
  // }
// }
// .card:hover {
//   width: 120%;
//   height: 120%;
//   background-color: rgba(0,0,0, 0.8);
//   transform: perspective(500px) rotateX(25deg) translate3d(-10px, -30px, 50px);
//   box-shadow: 0 35px 35px -8px rgba(0,0,0,0.9);
//   z-index: 10;
// }
// .real {
//     opacity: 1;
//     transform: perspective(500px) translate3d(0,-50px, 50px);
//   }
</style>